import "./index.scss"
import {useEffect} from "react";
import {useNavigate} from "react-router-dom";
import Skeleton from "@src/components/skeleton";
import {usersRelationshipsDataType} from "@src/services/userinfo.ts"
import {newsDataCreate} from "@src/store/newsData"
import {formatDate} from "@src/utils/date"

export default function News() {
    const {myFriendRequest1, updateMyFriendRequest, myFriendRequestNewMessage} = newsDataCreate()
    const navigate = useNavigate();


    useEffect(() => {
        if (!myFriendRequest1) {
            updateMyFriendRequest()
        }
    }, [])
    return (
        <div className="News">

            <ul>
                {myFriendRequest1?.map((item: usersRelationshipsDataType, index) => (
                    <li key={item.friend_id} className="news-li" onClick={() => navigate("privateChat", {state: item})}>
                        <div>
                            <img className="userHead" src={item.friend_avatar} alt=""/>
                        </div>
                        <div>
                            <div>
                                <h4 className="text-overflow-1">{item.friend_name}</h4>
                                <p>{myFriendRequestNewMessage?.[index]?.time && formatDate(new Date(myFriendRequestNewMessage?.[index]?.time))}</p>
                            </div>
                            <div>
                                <p className="text-overflow-1">{myFriendRequestNewMessage?.[index]?.content ? myFriendRequestNewMessage?.[index]?.content : item.friend_email}</p>
                                {myFriendRequestNewMessage?.[index]?.sum &&
                                    <span className="centered">{myFriendRequestNewMessage?.[index]?.sum}</span>}
                            </div>
                        </div>
                    </li>
                ))}

                {(myFriendRequest1 == undefined) && <>
                    <li className="news-li">
                        <Skeleton loading={true} style={{height: "100%", width: "100%"}}></Skeleton>
                    </li>
                    <li className="news-li">
                        <Skeleton loading={true} style={{height: "100%", width: "100%"}}></Skeleton>
                    </li>
                </>}
                {myFriendRequest1?.length == 0 &&
                    <li className="news-li" onClick={() => navigate("/home/news/addFriends")}>还没有好友呢 快去添加把</li>}
            </ul>
        </div>
    )
} 